<template>
        <bfe-dialog :title="$t('stm.userMaintenance.optLogInquiry')" :visible.sync="showFlag" @close="handCancel" :close-on-click-modal="false" :width="dialogWidth">
            <div>
                <div class="detailsTab">
                    <div class="caseItem">
                        <div class="item item-2">
                            <div class="itemName" :style="{'width': isCn ? '90px' : '120px'}">{{$t('stm.roleMaintenance.instno')}}</div>
                            <div class="itemMain" :style="{'width': isCn ? 'calc(100% - 90px)' : 'calc(100% - 120px)'}">{{detailsData.bankName}}</div>
                        </div>
                    </div>
                </div>
                <bfe-table ref='expandTable' :data="tableData" style="width: 100%; margin: 16px 0 0; float: left;" :height="tabHeight" :row-style="tableRowStyle" @expand="expandTab">
                    <bfe-table-column type="expand">
                        <template slot-scope="scope">
                            <div class="detailsTab">
                                <div class="caseItem">
                                    <div class="item item-3">
                                        <div class="itemName" :style="{'width': isCn ? '90px' : '120px'}">{{$t('stm.roleMaintenance.instno')}}</div>
                                        <div class="itemMain" :style="{'width': isCn ? 'calc(100% - 90px)' : 'calc(100% - 120px)'}">{{scope.row.roleHis.bankName}}</div>
                                    </div>
                                    <div class="item item-3">
                                        <div class="itemName" :style="{'width': isCn ? '90px' : '120px'}">{{$t('stm.roleMaintenance.rolename')}}</div>
                                        <div class="itemMain" :style="{'width': isCn ? 'calc(100% - 90px)' : 'calc(100% - 120px)'}">{{scope.row.roleHis.roleName}}</div>
                                    </div>
                                    <div class="item item-3">
                                        <div class="itemName" :style="{'width': isCn ? '90px' : '120px'}">{{$t('stm.roleMaintenance.description')}}</div>
                                        <div class="itemMain" :style="{'width': isCn ? 'calc(100% - 90px)' : 'calc(100% - 120px)'}">{{scope.row.roleHis.roleDesc}}</div>
                                    </div>
                                </div>
                            </div>
                            <bfe-tree
                                :data="treeData[language]"
                                show-checkbox
                                node-key="id"
                                ref="tree"
                                v-if="scope.row.expand"
                                :loading="loading"
                                :default-checked-keys="scope.row.checkIdList"
                                :props="defaultProps">
                            </bfe-tree>
                        </template>
                    </bfe-table-column>
                    <bfe-table-column :label="$t('stm.roleMaintenance.seqno')" prop="seq" width="100"> </bfe-table-column>
                    <bfe-table-column :label="$t('stm.userMaintenance.modifyTp')" prop="methodDesc"> </bfe-table-column>
                    <bfe-table-column :label="$t('stm.userMaintenance.modifydate')" prop="updateDatetime"> </bfe-table-column>
                    <bfe-table-column :label="$t('stm.userMaintenance.modifyuser')" prop="updateUserNo"> </bfe-table-column>
                </bfe-table>
                <bfe-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNo"
                    :page-sizes="[15, 30, 45, 60, 100]"
                    :page-size="pageInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.total">
                </bfe-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <bfe-button @click="handCancel">{{ $t('stm.btn.cancel') }}</bfe-button>
            </span>
        </bfe-dialog>
    </template>
    
    <script>
    import {mapState} from 'vuex';
    import {expandOptLogList} from './config'
    
    export default {
        props: {
            dialogWidth: {
                type: String,
                default: '50%'
            }
        },
        data() {
            return {
                detailsData: {},
                showFlag: false,
                tableData: [],
                expandOptLogList,
                pageInfo: {
                    pageNo: 1,
                    total: 0,
                    pageSize: 15
                },
                tabHeight: 0,
                treeData: {
                    zh_TW: [],
                    en_US: []
                },
                defaultProps: {
                    children: 'children',
                    label: 'text'
                },
                checkIdList: [],
                loading: false,
            }
        },
        computed: {
            ...mapState({
                isCn: (state) => state.base.language === 'zh_TW',
                language: state => state.base.language || 'zh_TW',
            })
        },
        mounted() {
        },
        methods: {
            expandTab(row, expanded){
                const indx=_.findIndex(this.tableData, row)
                console.log(expanded, row, '====', indx)
                this.$set(this.tableData[indx], 'expand', expanded)
                !this.tableData[indx].roleHis && this.$set(this.tableData[indx], 'roleHis', {})
                if(!expanded || this.tableData[indx].roleHis.bankId) return
                const params = {
                    optCode: 'STM005GET1106',
                    payload: {
                        ...this.detailsData,
                        seq: row.seq,
                        disabled: true
                    }
                }
                this.$p2svr(this.$api['_01_STM005ROLE1100'] , 'RequestPoAuth', params).then(res => {
                    const {roleHis, menuBo: {enTree, zhTree, checkIdList}} = res.payload || {}
                    this.treeData = {
                        zh_TW: zhTree || [],
                        en_US: enTree || []
                    }
                    this.$set(this.tableData[indx], 'roleHis', roleHis)
                    this.$set(this.tableData[indx], 'checkIdList', checkIdList)
                }).finally(() => {
                })
            },
            tableRowStyle(row){
                if (row.expand) {
                  return `background-color: #fae4e8`
                } else {
                  return ''
                }
            },
            initPage(obj){
                this.detailsData = {...obj}
                this.getPageData(obj)
                this.showFlag = true
                this.$nextTick(() => {
                    this.tabHeight = document.body.clientHeight * 0.7 - 219
                })
            },
            handCancel(){
                this.tableData = []
                this.pageInfo = {
                    pageNo: 1,
                    pageSize: 15,
                    total: 0
                }
                this.showFlag = false
            },
            handleSizeChange(val){
                this.pageInfo.pageNo = 1
                this.pageInfo.pageSize = val
                this.getPageData()
            },
            handleCurrentChange(val){
                this.pageInfo.pageNo = val
                this.getPageData()
            },
            getPageData(){
                const {pageNo, pageSize} = this.pageInfo
                const params = {
                    optCode: 'STM005GET1105',
                    payload: {
                        bankId: this.detailsData.bankId,
                        roleNo: this.detailsData.roleNo,
                    },
                    pageInfo: {
                        pageNo,
                        pageSize
                    }
                }
                this.loading = true
                this.$p2svr(this.$api['_01_STM005ROLE1100'] , 'RequestPoAuth', params).then(res => {
                    this.tableData = res.payload || []
                    this.pageInfo.total = res.pageInfo.total || 0
                }).finally(() => {
                    this.loading = false
                })
            }
        }
    }
    </script>
    
    <style lang="less" scoped>
    /deep/.giop-table__expanded-cell{
        padding: 16px;
    }
    /deep/.giop-pagination{
        width: 100%;
        float: left;
        margin: 16px 0 0;
    }
    .detailsTab .item{
        border-right: 1px solid rgba(0, 0, 0, 0.12);
    }
    </style>